<template>
  <el-menu
    :default-active="nowPath"
    class="el-menu-vertical-demo"
    background-color="#deeff0"
    :router="true"
    @select="handleSelect"
  >
    <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
      <!-- <el-icon>
        <edit />
      </el-icon> -->
      <span>{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { useRoute } from "vue-router";
import { reactive, ref, watch } from "vue";
import { Edit } from "@element-plus/icons-vue";

export default {
  components: {
    Edit,
  },
  setup(props) {
    const route = useRoute();
    const menuList = reactive([
      {
        path: "/home/system",
        name: "系统状态",
      },
      {
        path: "/home/setPassword",
        name: "密码修改",
      },
      {
        path: "/home/showIp",
        name: "系统设置",
      },
      {
        path: "/home/tabs/star",
        name: "初始化向导",
      },
      // {
      //   path: "/home/star",
      //   name: "开启服务",
      // },
      // {
      //   path: "/home/initial",
      //   name: "初始化KDC",
      // },
      // {
      //   path: "/home/center",
      //   name: "初始化中心",
      // },
      // {
      //   path: "/home/send",
      //   name: "发卡",
      // },
      {
        path: "/home/show",
        name: "发卡列表",
      },
        
      {
        path: "/home/logs",
        name: "日志查看",
      },
    ]);

    let nowPath = ref("");
    const handleSelect = (index, indexPath) => {
      // console.log('index' + index);
      // console.log('indexPath' + indexPath);
      // nowPath.value = indexPath
    };
    watch(
      () => route.fullPath,
      () => {
        // console.log(route.fullPath);
        nowPath.value = route.fullPath;
      },
      { immediate: true }
    );
    return {
      menuList,
      nowPath,
      handleSelect,
    };
  },
};
</script>

<style scoped lang='scss'>
.el-menu-item.is-active {
  color: #fff;
  background-color: #3688c6 !important;
  box-sizing: border-box;
  border-right: 3px solid red;
}
.el-menu.el-menu-vertical-demo {
  background-color: #fff;
  a {
    text-decoration: none;
  }
}
</style>